<script setup lang="ts">
import { computed } from 'vue'
import type { ViewChartPieProps } from './type.d'
import {
  DEFAULT_OPTION,
  createOptionSeries,
} from './index'
import { CHART } from '@/constant'

defineOptions({
  name: 'ViewChartPie',
  inheritAttrs: false,
})

const props = withDefaults(
  defineProps<ViewChartPieProps>(),
  {
    emphasis: true,
    legend: true,
    legendPosition: 'top',
    radius: () => ['40%', '70%'],
    option: () => ({} as any),
    center: () => ['50%', '60%'],
    autoresize: false,
  },
)
const { theme } = storeToRefs(useDesignStore())

const handlerOption = computed(() => ({
  ...DEFAULT_OPTION,
  ...props.option,
  legend: {
    ...CHART.createLegend(
      props.legend ? props.legendPosition : false,
      theme.value,
    ),
    ...props.option?.legend,
  },
  series: createOptionSeries(props, theme.value),
  dataset: props.dataset,
}))
</script>

<template>
  <b-chart
    :option="handlerOption"
    :autoresize="props.autoresize"
    class="view-chart-pie box-border"
    v-bind="$attrs"
  />
</template>
